<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			/* 基础类（共性） */
			.pannel {
				margin: 15px 0px;
			}
			.title {
				color: #fff;
				padding: 15px;
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
			}
			.content {
				padding: 15px;
				border-bottom-left-radius: 4px;
				border-bottom-right-radius: 4px;
			}

			/* 特性类 */
			.pannel-blue .title {
				background-color: #337ab7;
			}

			.pannel-blue .content {
				border: 1px solid #337ab7;
			}

			.pannel-green .title {
				background-color: #479727;
			}

			.pannel-green .content {
				border: 1px solid #479727;
			}
		</style>
	</head>
	<body>
		<div class="pannel pannel-blue">
			<div class="title">title</div>
			<div class="content">content</div>
		</div>
		<div class="pannel pannel-green">
			<div class="title">title</div>
			<div class="content">content</div>
		</div>
	</body>
</html>
